<template>
  <div id="user">
    <form method="get">
      <div class="input_wrap">
        <input type="text" maxlength="11" placeholder="请输入手机号或邮箱" tabindex="-1"/>
      </div>
      <div class="input_wrap">
        <input type="text" maxlength="6" placeholder="请输入密码" tabindex="-1"/>
      </div>
      <button class="login_btn" tabindex="-1">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "User",
};
</script>

<style scoped="scoped">
#user {
  margin: 0;
  padding: 0;
}
.input_wrap {
  position: relative;
  border-bottom: 1px solid #e1dbcc;
  margin: 0;
  margin-bottom: 0.4rem;
  height: 0.82rem;
  overflow: hidden;
  padding: 0 0.64rem;
}
.input_wrap > input {
  width: 100%;
  height: 100%;
  font-size: 0.24rem;
  display: inline-block;
  border: none;
  outline: none;
  position: absolute;
  top: 0;
}
.input_wrap::before {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  background: url("../assets/icons2.png") no-repeat center;
  background-size: 4rem 4rem;
  top: 30%;
  margin-top: -0.1rem;
  background-position: -65px -35px;
  left: 0.24rem;
}
.input_wrap:nth-of-type(2):before {
  content: "";
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  background: url("../assets/icons2.png") no-repeat center;
  background-size: 4rem 4rem;
  top: 30%;
  margin-top: -0.1rem;
  background-position: -25px -37px;
  left: 0.24rem;
}
.login_btn {
  display: block;
  width: 100%;
  height: 0.8rem;
  background: #fe4320;
  font-size: 0.26rem;
  margin-top: 1.2rem;
  border: none;
  color: #fff;
}
</style>